<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { Divider } from '$components/basic';
	import Tab, { Label as TabLabel } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import { shallowClone } from '$utils/clone';
	import { alova } from '$utils/request';
	import { createMessage } from '$components/basic/message';
	import Select, { Option } from '@smui/select';

	const dispatcher = createEventDispatcher();

	let open = false;
	let list = [];

	export let title = 'Edit Address';
	export function init(name, item) {
		title = name;
		open = true;
	}

	const dataArray = [
		{ span: 24, type: 'text', label: 'Current Password: ', value: 'password' },
		{ span: 24, type: 'text', label: 'New Password: ', value: 'new_password' }
	];

	const getDefault = () =>
		dataArray.reduce((acc, item) => {
			return { ...acc, [item.value]: item.type === 'checkbox' ? false : '' };
		}, {});

	export let info = getDefault();

	const on_confirm = async () => {
		await alova.Post('/member/edit', info);
		// await dispatcher('refresh');

		createMessage({
			type: 'success',
			message: title.charAt(0) === 'A' ? 'Add Success' : 'Edit success',
			duration: 2000
		});
	};
	const on_cancel = () => (info = getDefault());
</script>

<Dialog
	bind:open
	aria-labelledby="simple-title"
	aria-describedby="simple-content"
	container$class="items-start!"
	surface$class="max-w-100% mt-200px"
>
	<Title id="simple-title">{title}</Title>
	<Content id="simple-content">
		<form class="w-full grid grid-cols-24 gap-8px">
			{#each dataArray as item}
				<div class="flex flex-row items-center" style={'grid-column: span ' + item.span}>
					{#if item.type === 'text'}
						<Textfield
							type="text"
							class="w-full min-w-400px"
							label={item.label}
							variant="filled"
							bind:value={info[item.value]}
						/>
					{:else if item.type === 'checkbox'}
						<Label class="indent-sm">{item.label}</Label>
						<Checkbox bind:checked={info[item.value]} />
					{:else if item.type === 'select'}
						<Select
							variant="filled"
							class="w-full"
							bind:value={info[item.value]}
							label={item.label}
						>
							{#each list as country}
								<Option value={country}>{country}</Option>
							{/each}
						</Select>
					{/if}
				</div>
			{/each}
		</form>
	</Content>
	<Actions>
		<Button on:click={on_confirm} variant="raised" use={[InitialFocus]}>
			<Label>save</Label>
		</Button>
	</Actions>
</Dialog>
